<template>
  <view class="wrapper">
    <u-popup
      v-model="showSearch"
      mode="bottom"
      :closeable="true"
      :safe-area-inset-bottom="true"
      border-radius="20"
      :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }"
    >
      <!-- 标题 -->
      <view class="popup-wrap">
        <view class="page-title">订单查询</view>
        <scroll-view class="content-scroll" :scroll-y="true">
          <view class="cell-item">
            <view class="title">订单号/序号/手机号</view>
            <view class="input-wrap">
              <u-input
                v-model="form.keyword"
                class="input"
                :custom-style="{
                  backgroundColor: '#F8F8F8',
                  borderRadius: '10rpx',
                  paddingLeft: '24rpx',
                }"
                placeholder="请输入订单号/序号/手机号"
              />
              <text class="iconfont" @click="handleScan">&#xe6af;</text>
            </view>
          </view>
          <view class="cell-item">
            <view class="title">筛选类型</view>
            <view class="select-list">
              <view
                :class="['select-item', { active: index === form.orderType }]"
                v-for="(item, index) in orderTypes"
                :key="index"
                @click="selectType(index)"
              >{{ item }}</view>
            </view>
          </view>
          <view class="cell-item">
            <view class="title">筛选时间</view>
            <view class="date-wrap" @click="onCalendar">
              <view class="date-item">
                <view :class="{ active: startTime }">{{ startTime || '开始日期' }}</view>
                <text class="iconfont calendar">&#xe6c6;</text>
              </view>
              <view class="date-item">
                <view :class="{ active: endTime }">{{ endTime || '结束日期' }}</view>
                <text class="iconfont calendar">&#xe6c6;</text>
              </view>
            </view>
          </view>
          <view class="cell-item">
            <view class="title">筛选渠道</view>
            <view class="select-list">
              <view
                :class="['select-item channel', { active: index === channelIndex }]"
                v-for="(item, index) in channelList"
                :key="index"
                @click="selectChannel(item, index)"
              >{{ item.channelName }}</view>
            </view>
          </view>
          <view class="cell-item">
            <view class="title">筛选状态</view>
            <view class="select-list">
              <view
                :class="['select-item channel', { active: selectedStatus.includes(item.value) }]"
                v-for="(item, index) in statusList"
                :key="index"
                @click="selectStatus(item, index)"
              >{{ item.name }}</view>
            </view>
          </view>
          <view class="cell-item" v-if="!form.orderType">
            <view class="title">自提核验人 <text class="gray">（仅可筛选鲸品云小程序订单）</text></view>
            <view class="select-list">
              <view
                :class="['select-item channel', { active: index === pickupIndex }]"
                v-for="(item, index) in pickupSources"
                :key="index"
                @click="selectSource(item, index)"
              >{{ item.name }}</view>
            </view>
          </view>
        </scroll-view>
        <view class="btn-wrapper">
          <view class="btn-item" @click="handleReset">重置</view>
          <view class="btn-item active" @click="handleConfirm">筛选</view>
        </view>
      </view>
    </u-popup>
    <!-- 日历组件 -->
    <u-calendar
      max-date="2050-01-01"
      v-model="showTime"
      mode="range"
      @change="changeDate"
    ></u-calendar>
  </view>
</template>
<script>

import OrderStatusEnum from '@/common/enum/order/orderStatus'
import RefundStatusEnum from "@/common/enum/order/refundStatus"
import store from '@/store'

export default {
  name: "index",
  data() {
    return {
      OrderStatusEnum,
      RefundStatusEnum,
      showTime: false,
      orderTypes: ['订单', '售后单'],
      showSearch: true,
      channelIndex: 0,
      startTime: this.$moment().add(-6, 'days').format("YYYY-MM-DD"),
      endTime: this.$moment().format("YYYY-MM-DD"),
      form: {
        keyword: '',
        thirdChannelId: '',
        orderType: 0
      },
      pickupSources: [
        { name: '全部', value: '' },
        { name: '我核验的', value: 1 },
        { name: '自动完成的', value: 2 }
      ],
      pickupIndex: 0,
      selectedStatus: ['']
    }
  },
  computed: {
    channels() {
      return store.getters.channels
    },
    channelList() {
      const obj = {
        thirdChannelId: '',
        channelName: '全部'
      }
      return [obj, ...this.channels]
    },
    statusList() {
      const obj = {
        key: 'all',
        name: '全部',
        value: ''
      }
      return [obj, ...!this.form.orderType ? OrderStatusEnum.data : RefundStatusEnum.data]
    }
  },
  methods: {
    show() {
      this.showSearch = true
    },
    handleScan() {
      uni.scanCode({
        success: res => {
          this.form.keyword = res.result
        },
        fail: () => {
          this.$toast('未识别到该订单号')
        }
      })
    },
    onCalendar() {
      this.showTime = true
    },
    changeDate(e) {
      this.startTime = this.$moment(e.startDate).format("YYYY-MM-DD")
      this.endTime = this.$moment(e.endDate).format("YYYY-MM-DD")
      this.showTime = false
    },
    handleReset() {
      this.startTime = this.$moment().add(-6, 'days').format("YYYY-MM-DD")
      this.endTime = this.$moment().format("YYYY-MM-DD")
      this.form = {
        keyword: '',
        thirdChannelId: '',
        orderType: 0,
        startTime: this.startTime + ' 00:00:00',
        endTime: this.endTime + ' 23:59:59'
      }
      this.selectedStatus = ['']
      this.$emit('search', this.form)
      this.showSearch = false
    },
    handleConfirm() {
      this.$emit('search', {
        ...this.form,
        startTime: this.startTime + ' 00:00:00',
        endTime: this.endTime + ' 23:59:59'
      })
      this.showSearch = false
    },
    selectType(index) {
      delete this.form.pickupSource
      delete this.form.orderStatusList
      delete this.form.refundStatusList
      this.selectedStatus = ['']
      this.form.orderType = index
    },
    selectChannel(item, index) {
      this.channelIndex = index
      this.form.thirdChannelId = item.thirdChannelId
    },
    selectStatus(item) {
      let { selectedStatus } = this
      if (item.key === 'all') {
        selectedStatus = [item.value]
      } else {
        const index = selectedStatus.findIndex(id => id === item.value)
        index < 0 ? selectedStatus.push(item.value) : selectedStatus.splice(index, 1)
        selectedStatus = selectedStatus.filter(str => str !== '')
      }
      this.selectedStatus = selectedStatus
      if (!selectedStatus.includes('')) {
        const str = !this.form.orderType ? 'orderStatusList' : 'refundStatusList'
        this.form[str] = selectedStatus.join(',')
      }
    },
    selectSource(item, index) {
      this.pickupIndex = index
      this.form.pickupSource = item.value
    }
  }
}
</script>

<style scoped lang="scss">
.popup-wrap {
  padding: 32rpx 24rpx;

  .page-title {
    text-align: center;
    margin-bottom: 24rpx;
    font-size: 36rpx;
    font-weight: bold;
  }

  .content-scroll {
    max-height: 55vh;
  }

  .cell-item {
    padding: 24rpx 0;
    border-bottom: 1rpx solid #eee;

    .title {
      margin-bottom: 24rpx;

      .gray {
        color: #999999;
      }
    }
  }

  .input-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .input {
      flex: 1;
    }

    .iconfont {
      margin-left: 30rpx;
      font-size: 48rpx;
      color: #666;
    }
  }

  .select-list {
    display: flex;
    flex-wrap: wrap;

    .select-item {
      margin-right: 16rpx;
      border-radius: 16rpx;
      background: #F8F8F8;
      font-size: 24rpx;
      color: #666666;
      width: 162rpx;
      line-height: 64rpx;
      text-align: center;

      &.active {
        background: #2D71FD;
        color: #ffffff;
      }

      &.channel {
        margin-bottom: 16rpx;

        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
  }

  .date-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .date-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12rpx 20rpx;
      background: #F8F8F8;
      font-size: 24rpx;
      color: #cccccc;
      border-radius: 16rpx;
      width: 340rpx;

      .active {
        color: #333;
      }

      .calendar {
        margin-left: 30rpx;
        color: #999;
        font-size: 30rpx;
      }
    }
  }

  .btn-wrapper {
    display: flex;
    justify-content: space-between;
    padding-top: 16rpx;

    .btn-item {
      width: 330rpx;
      height: 96rpx;
      line-height: 96rpx;
      text-align: center;
      background: #fff;
      font-size: 34rpx;
      border-radius: 16rpx;
      border: 2rpx solid #eee;

      &.active {
        background: $main-bg;
        color: #fff;
      }
    }
  }

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
}
</style>
